<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性与侦听器</title>
    <script src="vue.js"></script>
</head>
<body>

    <div id="root">
        姓：<input v-model="firstName"/>
        名：<input v-model="lastName"/>
        <div>{{fullName}}</div>
        <div>{{count}}</div>
    </div>

    <script>
        new Vue({
            el: "#root",
            data: {
                firstName: '',
                lastName: '',
                count: 0
            },
            // 如果firstName和lastName没有变，每次计算fullName时会使用上次计算属性的缓存结果，只有至少一个改变时才会重新计算
            computed: {         
                fullName: function() {
                    return this.firstName + ' ' + this.lastName 
                }
            },

            //侦听器，监听一个数据的变化，一旦一个数据发生变化，就可以执行业务逻辑
            watch: {
                fullName: function() {
                    this.count ++
                }
            }
        })
    </script>
    
</body>
</html>